import { useState, useEffect, useContext, useRef } from 'react'
import LineChart from '../../common/LineChart';
import { Radio, Tooltip } from 'antd';
import ScrollTable from '../../../../../../common/ScrollTable';
import JcyjApi from '../../../../../../../utils/apis/JcyjApi';
import LittleTitle from '../../../../../../common/LittleTitle';


export default function ReservoirDetail(props) {
    const { item } = props;
    const [datas, setDatas] = useState();
    const [total, setTotal] = useState();

    //给图表LineChart准备数据
    const [jcdata, setJcdata] = useState();

    const [params, setParams] = useState({
        pageNum: 1,
        pageSize: 5,
    });

    const rootRef = useRef();

    const [currentPanel, setCurrentPanel] = useState(1);
    const handleChange = (e) => {
        setCurrentPanel(e.target.value);
    }
    
    useEffect(() => {
        JcyjApi.sksq_findby(params).then(resp => {
            setDatas(resp.rows)
            setTotal(resp?.total)
            
            setJcdata(e => ({
                ...e,
                XName: resp.rows.map(e => e.sj?.substring(8, 10)),
                data: [resp.rows.map(e => e.ksw), resp.rows.map(e => e.rkll), resp.rows.map(e => e.ckll), resp.rows.map(e => e.jhsw)],
                Line: ['库水位', '入库流量', '出库流量', '计划水位'],
                //color:'',
            }));
        })
    }, [item, params])

    return <div className='fill  layout-v'>
        <LittleTitle>
            <div className='layout-h center' style={{
                justifyContent: 'space-between',
                paddingRight: 12
            }}>
                <div>基本信息</div>
                <div>
                    <Radio.Group size='small' buttonStyle='outline' value={currentPanel} onChange={handleChange}>
                        <Radio.Button value={1}>监测数据</Radio.Button>
                        <Radio.Button value={2}>折线图</Radio.Button>
                        {/* <Radio.Button value={3}>视频监测</Radio.Button> */}
                    </Radio.Group>
                </div>
            </div>
        </LittleTitle>

        <div style={{
            padding: 12,

        }} ref={rootRef}>
            {currentPanel === 1 && <ScrollTable parentNode={rootRef} size={"small"} bordered columns={[
                {
                    title: '时间',
                    dataIndex: 'sj',
                    ellipsis: 'boolean',
                    render: (text) => (
                        <Tooltip title={text}>
                            <div style={{ width: '100px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                                {text}
                            </div>
                        </Tooltip>
                    )

                },
                {
                    title: '库水位',
                    dataIndex: 'ksw',
                    render: (text) => {
                        return text
                    }
                }, {
                    title: '入库流量',
                    dataIndex: 'rkll',
                    render: (text) => {
                        return text
                    }
                }, {
                    title: '出库流量',
                    dataIndex: 'ckll',
                    render: (text) => {
                        return text
                    }
                },]} dataSource={datas}
                pagination={{
                    current: params.pageNum,
                    pageSize: params.pageSize,
                    simple: true,
                    total,
                    onChange: (page) => {
                        setParams(params => {
                            return {
                                ...params,
                                pageNum: page
                            }
                        })
                    }
                }}
            />}
            {currentPanel === 2 && <LineChart jcdata={jcdata} jjz={item} />}

        </div>
    </div>;
}